<template>
  <div>
    <p-form-model :model="form" :rules="rules" layout="inline">
      <p-form-model-item label="单据类型">
        <p-select v-model="form.bizType" @change="handleChange">
          <p-select-option :key="2" value="">全部</p-select-option>
          <p-select-option :key="1" value="leads">线索</p-select-option>
          <p-select-option :key="0" value="business">商机</p-select-option>
        </p-select>
      </p-form-model-item>
      <p-form-model-item label="线索/商机编码">
        <p-input v-model="form.bizNo" placeholder="请输入" />
      </p-form-model-item>
      <p-form-model-item label="线索/商机名称">
        <p-input v-model="form.bizName" placeholder="请输入" />
      </p-form-model-item>
      <p-button type="primary" class="btn-search" @click="handleSearch">
        搜索
      </p-button>
      <p-form-model-item label="失销类别">
        <Selectleseleave
          v-model="form.leseLevel"
          :label-in-value="true"
          @input="hanlderChange($event, 'category')"
        />
      </p-form-model-item>
      <p-form-model-item label="失销细类">
        <Selectleseleave
          v-model="form.leseDetail"
          :label-in-value="true"
          lese-level="2"
          @input="hanlderChange($event, 'item')"
        />
      </p-form-model-item>
      <p-form-model-item label="失销时间">
        <p-range-picker
          v-model="form.creatTime"
          :placeholder="['开始时间', '结束时间']"
          format="YYYY-MM-DD"
          :mode="mode"
          :value="value"
          @change="changeTime"
        />
      </p-form-model-item>
      <p-button @click="handleReset">重置</p-button>
    </p-form-model>
  </div>
</template>
<script>
import monent from 'moment';
import { postloseReasonCfglist } from '@/api/lose.js';
import Selectleseleave from '@/components/select/Selectleseleave.vue';
const all = { label: '全部', value: '' };
const defaultForm = {
  bizType: '',
  bizNo: undefined,
  bizName: undefined,
  leseLevel: undefined,
  leseDetail: undefined,
  item: undefined,
  category: undefined,
  creatTime: undefined,
  startCreateTime: undefined,
  endCreateTime: undefined,
};
export default {
  components: {
    Selectleseleave,
  },
  data() {
    return {
      form: {
        ...defaultForm,
        mode: ['date', 'date'],
        value: [],
        codeOptions: [],
      },
    };
  },
  computed: {
    mergeOptions() {
      return this.codeOptions;
    },
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      const res = await postloseReasonCfglist({ leseLevel: '1' });
      const data = res?.data?.data || [];
      this.codeOptions = [all, ...data];
    },
    handleSearch() {
      this.$emit('search', this.form);
    },
    handleReset() {
      this.form = { ...defaultForm };
      this.$emit('search', this.form);
    },
    handleexport() {
      this.$emit('export');
    },
    changeTime(value) {
      this.value = value;
      this.form.startCreateTime =
        monent(value[0]).format('YYYY-MM-DD') + ' ' + '00:00:00';
      this.form.endCreateTime =
        monent(value[1]).format('YYYY-MM-DD') + ' ' + '23:59:59';
    },
    hanlderChange(val, key) {
      console.log(val, key);
      this.form[key] = val.key;
    },
  },
};
</script>

<style lang="less" scoped>
.poros-form {
  box-sizing: border-box;
  background-color: #f7f7f8;
  padding: 10px;
  padding-bottom: 0px;
  width: 100%;
}
.poros-form-item {
  width: 28%;
  margin-bottom: 10px;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 100px);
}
.btn-search {
  margin-right: 16px;
}
/deep/ .poros-form-item-label {
  width: 100px;
}
</style>
